<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>map</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.css" rel="stylesheet">
</head>

<body>
    <div class="operate">
        <div class="btn btn-sm btn-primary file">
            <span>上传表格</span>
            <input type="file" id="Upload">
        </div>
        <button class="btn btn-sm btn-dark" id="RuleBtn">
            颜色规则设置
        </button>
        <span>&emsp;</span>
        <span>线宽：</span>
        <input type="number" id="StrokeWidth" class="form-control form-control-sm" style="width: 120px;">
    </div>
    <div id="Map" class="map"></div>

    <div class="modal" id="RuleModal">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">颜色规则设置</h5>
            </div>
            <div class="modal-body">
              <textarea class="color-rule" id="RuleTextarea"></textarea>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" id="RuleCancelBtn">关闭</button>
              <button type="button" class="btn btn-primary" id="RuleConfirmBtn">确定</button>
            </div>
          </div>
        </div>
      </div>

    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=Q9sZXyk7GuGXCHzCb52BkaTQzMqhTAMl"></script>
    <script src="./src/b-map.js"></script>
</body>

</html>